<template>
  <el-dialog :visible="printWareVisible" :center="true" width="74%" :show-close="false">
    <div id="printArea">
    <h3 style="text-align: center">入库单</h3>
    <el-row>
      <el-col>单位:{{ company }}</el-col>
      <el-col>日期:{{ date }}</el-col>
      <el-col>单号:{{ serialNumber }}</el-col>
    </el-row>
    <el-table :data="printHousingData" :border="true" size="mini" style="width: 100%">
      <el-table-column label="序号" width="70px" type="index"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="物料编码" prop="code" width="100px"></el-table-column>
      <el-table-column label="规格/型号" prop="model"></el-table-column>
      <el-table-column label="单位" prop="unit" width="70px"></el-table-column>
      <el-table-column label="数量" prop="number" width="70px"></el-table-column>
      <el-table-column label="价税合计" prop="totalPriceTax" width="120px"></el-table-column>
      <el-table-column label="税率" prop="taxRate" width="70px"></el-table-column>
      <el-table-column label="未税单价" prop="unitPriceBeforeTax" width="120px"></el-table-column>
      <el-table-column label="未税金额" prop="amountBeforeTax" width="120px"></el-table-column>
      <el-table-column label="项目号" prop="project" width="120px"></el-table-column>
<!--      <el-table-column label="入库地点" prop="positionId"></el-table-column>-->
    </el-table>
    <el-row>
      <el-col>采购:{{ purchasePerson }}</el-col>
      <el-col>保管:{{ acceptancePerson }}</el-col>
      <el-col>验收:{{ custodian }}</el-col>
<!--      <el-col>审核:{{ reviewer }}</el-col>-->
    </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="printWarehousing" size="mini">打 印</el-button>
      <el-button type="primary" @click="cancle" size="mini">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import printJS from 'print-js'
export default {
  name: "PrintWarehousing",
  data() {
    return {
      company: '赛福斯特',
      date: new Date().toISOString().slice(0, 10),
      printHousingData: [],
      printWareVisible: true,
      processInstanceId: this.$route.params.processInstanceId, // 获取路由参数
      purchasePerson: '',
      acceptancePerson: '',
      custodian: '',
      reviewer:'',
      serialNumber:''
    }
  },
  methods: {
    printWarehousing() {
      printJS({
        printable:'printArea',
        type:'html',
        style: `
        .h3{align:center;}
        .el-row{display:flex;justify-content:space-between; font-size:11px; padding:10px;}
          .el-table { font-size: 13px; width: 100%;}
          .el-table tr th, .el-table tr td { padding: 5px 10px; white-space: nowrap;  border-collapse: collapse !important;
           line-height:20px; text-align:left; border:1px solid #eee;font-weight:100;}
          .el-dialog { width: 100%; margin: 0; padding: 0;}
        `,
        scanStyles: false,
      })
      console.log("打印完成")
      this.printWareVisible = false
      this.$router.push({name: 'WMS'})
    },
    cancle() {
      this.printWareVisible = false
      this.$router.push({name: 'WMS'})
    }
  },
  mounted() {
    const processInstanceId = this.processInstanceId
    console.log(processInstanceId)
    this.$http.get(`/material/warehousing/print/${processInstanceId}`).then((response) => {
      if (response.data.code == 1 && response.data.data.length > 0) {
        this.printHousingData = response.data.data
        this.purchasePerson = this.printHousingData[0].purchasePerson
        this.acceptancePerson = this.printHousingData[0].acceptancePerson
        this.custodian = this.printHousingData[0].custodian
        this.reviewer = this.printHousingData[0].reviewer
        this.serialNumber = this.printHousingData[0].serialNumber
        console.log(this.printHousingData)
      } else {
        alert("获取入库单数据失败")
      }
    })
  }
}
</script>
<style scoped>
::v-deep .el-table{
  border-collapse: collapse !important;
}
</style>
